<template>
	<view>
		<!-- 搜索开始 -->
		<view class="content_content" style="width: calc(100% - 12rpx);">
			<view class="index_header">
				<view class="">
					<view>
						<image src="/static/image/index/sousuo.png"></image>
						<input class="search_neirong" v-model="search" :disabled="shows" type="text" placeholder="客资姓名"
							placeholder-class="index_placeholder">
					</view>
				</view>
				<view class="img_sx" @click="shaixuans()">
					<image src="/static/image/index/shaixuan.png"></image>
				</view>
			</view>
		</view>
		<!-- 搜索结束 -->
		<!-- 导航栏 -->
		<view class="content_content nav_list">
			<view class="_list" @click="dianji(item.name,index,uid)" v-for="(item,index) in nav" :key="index">
				<view :class="{hunsha_sy:index == di_index}">{{item.name}}</view>
				<image src="/static/image/index/xuanzhong.png" v-if="index == di_index" mode=""></image>
			</view>
		</view>
		<!-- 列表 -->
		<view class="content_content_con yinying" v-for="(item,index) in all_tuisong" :key="index"
			@click="publics.navigateTo('/view/kehu/kehu_xiangqing?id='+item.id+'&tianjia='+ 0)">
			<view class="zhuangtai">
				<view>客资ID:{{item.id}}
					<image src="/static/image/me/fuzhi.png" @click.stop="publics.fuzhi(item.id)" class="fuzhi"></image>
				</view>
				<view>{{item.typename}}</view>
			</view>
			<view class="xinxi">
				<view class="xingming">姓名：{{item.kzname}}</view>
				<view>客户类型：{{item.servertype}}</view>
				<view class="dianhua">联系电话：{{item.tel}}</view>
				<view class="wechart">微信号：{{item.wechat}}</view>

				<view>预计婚期：{{item.wedding}}</view>
				<view class="chengshi">拍摄城市：{{publics.s_dizhi()}}</view>
				<view class="zhuanrang" v-if="item.upusername!==''">转让人：{{item.upusername}}</view>
			</view>
		</view>

		<!-- 列表 -->
		<view class="content_content_con yinying" v-for="(item,index) in all_tade" :key="index"
			@click="publics.navigateTo('/view/kehu/kehu_xiangqing?id='+item.id+'&tianjia='+ 0)">
			<view class="zhuangtai">
				<view>客资ID:{{item.id}}
					<image src="/static/image/me/fuzhi.png" @click.stop="publics.fuzhi(item.id)" class="fuzhi"></image>
				</view>
				<view>{{item.typename}}</view>
			</view>
			<view class="xinxi">
				<view class="xingming">姓名：{{item.kzname}}</view>
				<view>客户类型：{{item.servertype}}</view>
				<view class="dianhua">联系电话：{{item.tel}}</view>
				<view class="wechart">微信号：{{item.wechat}}</view>
				<view>预计婚期：{{item.wedding}}</view>
				<view class="chengshi">拍摄城市：{{publics.s_dizhi()}}</view>
				<view class="zhuanrang" v-if="item.upusername!==''">转让人：{{item.upusername}}</view>
			</view>
		</view>


		<kehu :show="shows" @shaixuan="shaixuan"></kehu>
		<zanwushuju v-if="all_tuisong.length==0 && state==1"></zanwushuju>
		<zanwushuju v-if="all_tade.length==0 && state==0"></zanwushuju>
	</view>
</template>

<script>
	import kehu from "@/components/kehu.vue";

	export default {
		components: {
			kehu
		},
		data() {
			return {
				search: '',
				shows: false,
				nav: [
					{ name: "全部" },
					{ name: "已领取" },
					{ name: "活动锁单" },
					{ name: "订单成交" },
					{ name: "转让客资" },
					{ name: "放弃客资" },
					{ name: "取消订单申请" },
					{ name: "取消订单成功" },
					{ name: "取消订单失败" },
					{ name: "客资退回申请" },
					{ name: "客资退回成功" },
					{ name: "客资退回失败" },
					{ name: "取消活动锁单" }
				],
				di_index: 0,
				isShow: '全部', // 判断父组件的数据有没有这一项
				index: 0,
				stat: this.state,
				uid: this.userids,
				url: "",
				tuisong: [],
				tade: [],
				pagenum: 1,
				tishi: 1,
				tianjia: -1

			}
		},
		// 父组件传值
		props: {
			leiji: {
				type: Array
			},
			kzxinxi: {
				type: Array
			},
			state: '',
			userids: ''

		},
		onLoad() {
			// 1 累计推送   0 他的客资

			// this.state=option.state
			// if(option.state == 2){
			// 	this.publics.navigateTo('/view/kehu/xiangqing_kz?state=' + option.state)
			// }
		},
		watch: {
			leiji(newValue) {
				this.tuisong = newValue;
			},
			kzxinxi(newValue) {
				this.tade = newValue;
			},
			state(newValue) {
				this.stat = newValue;

			},
			userids(newValue) {
				this.uid = newValue;
				console.log(newValue, 'newValue')
			}
		},
		computed: {

			all_tade: function() {
				return this.tade.filter((item) => {
					return item.kzname.match(this.search);
				})
			},
			all_tuisong: function() {
				return this.tuisong.filter((item) => {
					return item.kzname.match(this.search);
				})
			}
		},
		methods: {
			shaixuans() {
				this.shows = !this.shows;
			},
			shaixuan(e) {

				var that = this;
				that.pagenum = 1;
				// console.log(that.stat,"that.state")
				console.log(e, '接值')
				that.sxtype = e.sxtype;
				if (e.states == 2) {
					this.$emit("tuisong", this.sxtype)
					// this.publics.navigateTo('/view/index/fenlei?sxtype=' + e.sxtype)
				}
				this.shows = false;
			},
			dianji(name, index, uid) {
				this.di_index = index;
				this.sxtype = ",,," + name;
				this.uid = uid;
				this.isShow = name;
				this.$emit("tuisong", this.sxtype)
			},
		},

	}

</script>

<style lang="scss" scoped>
	.nav_list{
		margin-top: 140rpx;
		display: flex;
		overflow: auto;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.nav_list::-webkit-scrollbar {display: none; }
	.fuzhi {
		width: 24rpx;
		height: 24rpx;
		margin-left: 18rpx;
	}

	.chengshi {
		width: 640rpx;

	}

	.dianhua {
		width: 300rpx;
	}

	// .weixina{
	// 		word-break: break-all;
	// 		display: -webkit-box;
	// 		-webkit-line-clamp: 1;
	// 		-webkit-box-orient: vertical;
	// 		overflow: hidden;
	// 		margin-left: 54rpx !important;
	// 		width: 238rpx;
	// 		// text-align: left;
	// }
	.xingming {
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		width: 208rpx;
	}

	.wechart {
		// margin-left: 66rpx;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		width: 238rpx;
	}

	.img_sx {
		box-shadow: $shadow_zhuse;
	}

	.hunsha_sy {
		font-weight: bold;
		color: $heise_ziti !important;
		font-size: 34rpx;
	}

	.yinying {
		box-shadow: $shadow;
	}

	._list {
		position: relative;
		padding-left: 12rpx;
	
	view {
			font-size: 28rpx;
			margin-right: 20rpx;
			padding-bottom: 30rpx;
			color: $qianhui_ziti ;
		}

		image {
			width: 30rpx;
			height: 8rpx;
			position: absolute;
			top: 46rpx;
			left: 12rpx;
		}
	}

	.zhuangtai {
		font-size: 26rpx;
		color: $heise_ziti;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid var(--qianhui_eee);
		padding: 30rpx 0rpx 24rpx 0rpx;
	}

	.zhuangtai view:last-child {
		color: $heise_ziti;
		font-size: 26rpx;
		font-weight: bold;
	}

	.xinxi {
		font-size: 26rpx;
		color: $qianhuione_ziti;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 30rpx;

		view {
			padding: 24rpx 0 0 0rpx;
		}
	}

	.xinxi view:nth-child(2) {
		// border: solid;
		width: 238rpx;
	}

</style>

